<template>
	<navigator url="/pages/index/index" open-type="redirect">回首页</navigator>
	<view class = "uni-title uni-common-mt">
		uniapp推荐展示的样式 
		<text>\n uni-list布局</text>
	</view>
	<view class="uni-list">
		<!-- 此处的group能监听change事件，change覆盖的区域就是如下label标签包裹的区域 -->
		<!-- label 标签用来改进表单组件的可用性，比如此处将多个checkbox包裹起来一起触发 -->
		<checkbox-group @change="onChangeGoodsList">
			<!-- 
			:key 是一个特殊的属性，用于给每个循环项提供一个唯一的标识。
			 是 v-bind:key 的缩写
			 -->
			<label class="uni-list-cell uni-list-cell-pd" v-for="(item,index) in goods" :key="item.id">
				<view>
					<!-- 在 Vue 中，组件的 prop 类型是有严格校验的，而 checkbox 组件的 value 属性要求为字符串类型。所以使用 toString()方法转一下 -->
					<checkbox :value="item.id.toString()" :checked="item.checked">{{item.name}}</checkbox>
					<text @click="clickdel(index)"> 删除</text>
				</view>
			</label>
		</checkbox-group>
	</view>
</template>

<script setup>
	import {ref} from "vue"
	const goods = ref([
		{"id":10010, "name":"ipad", "checked":false},
		{"id":10011, "name":"iphone", "checked":false},
		{"id":10012, "name":"mac", "checked":false},
		{"id":10013, "name":"ipod", "checked":false},
	]);
	
	function onChangeGoodsList(event) {
		console.log(event.detail.value)
	}
	
	// 点击
	function clickdel(index) {
		console.log(index)
		// Removes elements from an array and, if necessary, inserts new elements in their place, returning the deleted elements.
		goods.value.splice(index, 1)
	}
</script>

<style>
	       
</style>
